
class SliderModel {
    constructor(freq, q, db, maxFreq, minFreq, maxQ, minQ, maxdB, mindB) {
        this.freq = freq;
        this.q = q;
        this.db = db;
        this.maxFreq = maxFreq;
        this.minFreq = minFreq;
        this.maxQ = maxQ;
        this.minQ = minQ;
        this.maxdB = maxdB;
        this.mindB = mindB;
    }
}

class InputView {
    constructor(key) {
        // 创建包含 label 和 input 的 div 元素
        this.view = document.createElement('div');
        this.view.className = `${key}View`;

        // 创建 <label> 元素
        this.label = document.createElement("label");
        this.label.setAttribute("for", key);  // 设置 for 属性
        this.label.textContent = `${key}:`;     /// 设置 label 内容

        // 创建 <input> 元素
        this.input = document.createElement("input");
        this.input.setAttribute("type", "text");   // 设置 input 类型
        this.input.setAttribute("id", key);    // 设置 id
        this.input.setAttribute("name", `${key}Key`);  // 设置 name
        this.input.setAttribute("required", "");    // 设置 required 属性

        // 将 label 和 input 元素添加到 view 中
        this.view.appendChild(this.label);
        this.view.appendChild(this.input);
    }
}

class SliderItem {

    constructor(selectedButtonID, onSliderChangeCallback) {
        this.selectedButtonID = selectedButtonID;
        // 创建背景
        this.subview = document.createElement('div');
        this.subview.className = 'subview';

        //1，创建slider
        this.slider = document.createElement('input');
        this.slider.type = 'range';
        this.slider.className = 'slider'; // 添加 CSS 样式类
        this.slider.min = 0;
        this.slider.max = 100;
        this.slider.value = Math.floor(Math.random() * 100); // 设置初始值为 0 到 100 之间的随机数
        const percentage = this.calculatePercentage(this.slider.value, this.slider.min, this.slider.max);
        this.slider.style.background = `linear-gradient(to top, red ${percentage}%, #ddd ${percentage}%)`;
        // initializeSlider(slider); // 初始化滑块

        // 2. 创建频率（Freq）视图
        this.freqView = new InputView("Freq");
        // 3. 创建 Q 值视图
        this.qView = new InputView("Q");
        // 4. 创建 dB 值视图
        this.dbView = new InputView("dB");

        this.subview.appendChild(this.slider)
        this.subview.appendChild(this.freqView.view);
        this.subview.appendChild(this.qView.view);
        this.subview.appendChild(this.dbView.view);


        //
        this.dbView.view.querySelector('input').value = this.slider.value; // 更新 input 的值为当前 slider 的值
        // 为滑块添加事件监听器
        this.slider.addEventListener('input', (event) => {
            this.updateSliderBackground(this.slider);
            // 恢复其他滑块的背景颜色
            this.resetOtherSliders(this.slider);
            this.updateSelectedButton(this.selectedButtonID);


            console.log(`Slider Value: ${event.target.value}`);
            if (typeof onSliderChangeCallback === 'function') {
                onSliderChangeCallback(event.target.value); // 调用传递的回调函数
            }
        });
    }

    // 计算滑动的百分比
    calculatePercentage(value, min, max) {
        return ((max - value) / (max - min)) * 100;
    }

    // 更新按钮的状态
    updateSelectedButton(buttonId) {
        this.selectedButtonID = buttonId;
        // 根据按钮的状态更新滑块的行为
        if (buttonId === 'btn1') {
            // 更新 freq
            this.freqView.view.querySelector('input').value = this.slider.value;
        } else if (buttonId === 'btn2') {
            // 更新 Q
            this.qView.view.querySelector('input').value = this.slider.value;
        } else if (buttonId === 'btn3') {
            // 更新 dB
            this.dbView.view.querySelector('input').value = this.slider.value;
        }
    }

    // 更新滑块的背景颜色
    updateSliderBackground(slider) {
        const value = slider.value;
        const red = Math.min(255, Math.floor(value * 2.55)); // 从红色到黄色
        const green = Math.min(255, Math.floor((100 - value) * 2.55)); // 从黄色到绿色
        const blue = Math.min(255, Math.floor(value * 1.28));       // 蓝色示例逻辑，可根据需求调整
        slider.style.setProperty('--value', value + '%');
        const percentage = this.calculatePercentage(value, slider.min, slider.max);
        slider.style.background = `linear-gradient(to top, rgb(${red}, ${green}, ${blue}) ${percentage}%, #ddd ${percentage}%)`;
    }

    // 重置其他滑块的背景颜色
    resetOtherSliders(currentSlider) {
        document.querySelectorAll('.slider').forEach(slider => {
            if (slider !== currentSlider) {
                const percentage = this.calculatePercentage(slider.value, slider.min, slider.max);
                slider.style.background = `linear-gradient(to top, red ${percentage}%, #ddd ${percentage}%)`;
            }
        });
    }
}

class EQController {
    constructor() {
        this.view = document.getElementById('bgView');
        this.btn1 = document.getElementById('btn1');
        this.btn2 = document.getElementById('btn2');
        this.btn3 = document.getElementById('btn3');

        this.btn1.onclick = () => this.actionForBtn('btn1');
        this.btn2.onclick = () => this.actionForBtn('btn2');
        this.btn3.onclick = () => this.actionForBtn('btn3');

        // 用来存储所有的 SliderItem 实例
        this.sliderItems = [];
        this.initSliderItem();

        // 默认选中 btn3。 默认选中按钮是 btn3 (db)
        this.selectedButtonID = 'btn3';
        this.actionForBtn(this.selectedButtonID);
    }


    initSliderItem() {
        for (let i = 0; i < 20; i++) {
            const item = new SliderItem(this.selectedButtonID, (value) => this.actionForSlider(value));
            this.view.appendChild(item.subview);
            this.sliderItems.push(item);
        }
    }
    // 设置当前选中的按钮
    async actionForBtn(buttonId) {
        this.selectedButtonID = buttonId;

        // 更新按钮的样式（可选）
        [this.btn1, this.btn2, this.btn3].forEach((btn) => {
            btn.classList.remove('selected');
        });

        const selectedBtn = document.getElementById(this.selectedButtonID);
        // 立即添加 selected 类来确保样式更新
        selectedBtn.classList.add('selected');
        // 强制移除当前按钮的焦点，防止干扰
        selectedBtn.blur();

        // 更新所有 slider 对应的按钮
        // 更新所有 SliderItem 的选中按钮状态
        this.sliderItems.forEach(item => item.updateSelectedButton(this.selectedButtonID));
    }

    async actionForSlider(value) {
        console.log(`==========> ${value}`);
    }
}


const vc = new EQController();



